<template>
  <span :class="padding ? 'user-link-padding' : ''" class="user-link">
    <template v-if="hasPermission('api:user:info') && userId > 0">
      <span v-if="drawer" :style="{color: color}" @click="handleShowInfo">{{ userId }}</span>
      <router-link v-else :style="{color: color}" :to="'/user/info/' + userId" :underline="false">{{ userId }}</router-link>
    </template>
    <span v-else>{{ userId || '-' }}</span>
  </span>

  <!-- 弹窗显示 -->
  <el-drawer v-if="drawerShow" v-model="drawerVisible" append-to-body size="60%" @closed="handleClosed">
    <!-- 标题 -->
    <template #header>
      <div class="dialog-title">
        <SvgIcon icon="ep:info-filled" size="19" style="margin-right: 5px;"></SvgIcon>
        <span>用户详情信息</span>
      </div>
    </template>
    <!-- 详情 -->
    <user-info :id="userId" ref="infoRef" :show-page-header="false"/>
  </el-drawer>
</template>

<script lang="ts" setup>

import { hasPermission } from '@/utils/permission.ts';
import { SvgIcon } from '@/components/icon';
import UserInfo from '@/views/user/user/components/user-info.vue';
import { nextTick, ref } from 'vue';

defineOptions({name: 'user-info-link'});

const props = defineProps({
  userId: {
    type: Number,
    default: 0,
    required: true
  },
  color: {
    type: String,
    default: 'var(--el-color-primary)'
  },
  padding: {
    type: Boolean,
    default: true
  },
  drawer: {
    type: Boolean,
    default: true
  }
});

const drawerShow = ref(false);
const drawerVisible = ref(false);
const infoRef = ref();
const handleShowInfo = () => {
  drawerShow.value = true;
  nextTick(() => {
    drawerVisible.value = true;
    infoRef.value?.initData(props.userId);
  });
};
const handleClosed = () => {
  drawerShow.value = false;
  drawerVisible.value = false;
};
</script>

<style lang="scss" scoped>
.user-link {
  display: inline-block;
  height: 23px;
  line-height: 23px;
  box-sizing: border-box;
  white-space: nowrap;
}

.user-link-padding {
  padding: 0 5px;
}

a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}
</style>
